<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        /**
         * 箭头函数 =>
         * 是一种特殊的匿名函数
         */ 

        /**
         * 示例1：一个参数
         */ 
        // var a = function(num){
        //     return num*2
        // }
        var a = num => num*2

        /**
         * 示例2：多个参数
         */
        // var b = function(num1,num2){
        //     return num1+num2
        // }
        var b = (num1,num2) => num1+num2

        /**
         * 示例3：无参数
         */
        // var c = function(){
        //     return 5
        // }
        var c = () => 5

        /**
         * 示例4：多行代码
         */
        // var d = function(){
        //     console.log(1)
        //     console.log(2)
        //     console.log(3)
        // }
        var d = () => {
            console.log(1)
            console.log(2)
            console.log(3)
        }

        /**
         * 示例5：应用1
         */
        var nums = [1,2,3,4,5]
        // nums.forEach((item,index) => {
        //     console.log(item,index)
        // })

        /**
         * 示例6：应用2
         */
        $(function(){
            $('#btn').click(function(){
                // console.log(this)
                $('li').each((index,item) => {
                    // console.log(index,item)
                    console.log(this) // 此处的this指向的是btn，箭头函数中的this指向的是上一级的this，本身不会产生新的this
                })
            })
        })

    </script>
</head>
<body>
    <button id="btn">按钮</button>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
        <li>li4</li>
        <li>li5</li>
    </ul>
</body>
</html>